<template>
  <a-modal
    v-model:visible="modalVisible"
    :width="1000"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 选择暂存位置</template>
    <div class="content">
      <div class="tree-item">
        <a-tree
          :data="treeData"
          :fieldNames="{
            key: 'id',
            title: 'name',
          }"
          :default-selected-keys="iniPid"
          @select="getTreeData" /></div
      ><div class="table-item">
        <a-table
          :data="getTableData"
          :pagination="false"
          :row-selection="rowSelection"
          v-model:selectedKeys="selectedKeys"
          row-key="id"
          @select="onSelect"
        >
          <template #columns>
            <a-table-column
              title="货架编号"
              :width="100"
              data-index="number"
              align="center"
            />
            <a-table-column
              title="货架名称"
              :width="100"
              data-index="name"
              align="center"
            />
          </template>
        </a-table>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect, nextTick } from 'vue';
  import { GetRouters } from '@/api/menu';
  import {
    GetLocationAll,
    postLocation,
  } from '@/api/inventory-management/warehouse-management/location-list/index';
  // import { cloneDeep } f rom 'lodash';

  const rowSelection = {
    type: 'radio',
  };

  const props = withDefaults(
    defineProps<{
      visible: boolean;
    }>(),
    {
      visible: false,
    }
  );
  const emit = defineEmits(['update:visible', 'selectLocationEmit']);
  const getRoleTree = ref<any>([]);

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  const tree = (data: any) => {
    data.forEach((element: any) => {
      if (element.children) tree(element.children);
      else if (element.children === null && element.warehouseShelves) {
        element.children = element.warehouseShelves;
      }
    });
    return data;
  };

  const treeData = ref();
  const getTableData = ref();
  const iniPid = ref();
  // 获取货架列表设局
  const getUnitList = async () => {
    let data: any = {};
    // if (searchName.value) data.name = searchName.value;//
    // if (searchNumber.value) data.number = searchNumber.value;
    const res = await GetLocationAll({ ...data });
    tree(res);
    treeData.value = res;
    iniPid.value = [res[0].id];
    getTableData.value = res[0].warehouseLocations;
  };
  getUnitList();

  let form = ref<any>({});

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };

  const getTreeData = (e: any, val: any) => {
    if (!val.node.warehouseLocations) return;
    getTableData.value = val.node.warehouseLocations;
  };

  const selectList = ref({});
  const onSelect = (e: any, id: number, val: any) => {
    selectList.value = val;
  };

  // 确定
  const handleOk = async () => {
    emit('selectLocationEmit', selectList.value);
    modalVisible.value = false;
  };
</script>

<style scoped lang="less">
  .content {
    display: flex;
    .tree-item {
      width: 25%;
    }
    .table-item {
      margin-left: 20px;
      width: 80%;
    }
  }
</style>
